<template>
  <div class="btn_warp" style="height:32px;width: 100%;display: flex;padding-top: 0px;padding-bottom: 5px">
  </div>
  <el-form :model="form" label-width="120px">
    <el-form-item label="物业地址">
      {{form.propertyAddress}}
    </el-form-item>
    <el-form-item label="是否已出售">
      <el-select v-model="form.propertyIssell" placeholder="选择" size="small">
        <el-option v-for="item in isSellOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="业主姓名">
      <el-input v-model="form.householdName"></el-input>
    </el-form-item>
    <el-form-item label="户型">
      <el-select v-model="form.propertyType" placeholder="选择" size="small">
        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="装修情况">
      <el-select v-model="form.propertyDecorate" placeholder="选择" size="small">
        <el-option v-for="item in decorateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="建筑面积(m²)">
      <el-input-number input-style="height:23px;" :min="0" :max="1000" size="small" controls-position="right" class="table-input" v-model="form.propertyAllarea" />
    </el-form-item>
    <el-form-item label="使用面积(m²)">
      <el-input-number input-style="height:23px;" :min="0" :max="1000" size="small" controls-position="right" class="table-input" v-model="form.propertyUsearea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="saveRow">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ElMessage } from 'element-plus'
import {ref,onMounted} from 'vue'
import axios from "axios"

export default {
  name: "HouseHold",
  setup(){
    const tableData = ref([ ])
    const isSellOptions=[
      {
        value:'是',
        label:'是'
      },
      {
        value:'否',
        label:'否'
      }
    ]
    const typeOptions=[
      {
        value:'一居室',
        label:'一居室'
      },
      {
        value:'二居室',
        label:'二居室'
      },
      {
        value:'三居室',
        label:'三居室'
      },
      {
        value:'多居室',
        label:'多居室'
      }
    ]
    const decorateOptions=[
      {
        value:'已装修',
        label:'已装修'
      },
      {
        value:'装修中',
        label:'装修中'
      },
      {
        value:'未装修',
        label:'未装修'
      }
    ]
    const form = ref({})

    //行保存事件
    function saveRow(){
      if(form.value.propertyIssell === ''){
        ElMessage({message:'是否出售不能为空！'})
      }else if(form.value.propertyIssell === '否' && form.value.householdName !=''){
        ElMessage({message:'该房产暂未出售，业主姓名无效！'})
      } else if(form.value.propertyIssell === '是' && form.value.householdName==='') {
        ElMessage({message:'请输入业主姓名！'})
      }else if(form.value.propertyIssell === '是' && form.value.householdName !=''){
        //1.发送请求判断业主是否存在
        axios.get('http://localhost:8085/hasHousehold',{
          params:{
            householdName:form.value.householdName,   //业主姓名
            propertyAddress:form.value.propertyAddress //物业地址
          }
        }).then(
            (resp)=>{
              if(resp.data){
                //存在则请求进行数据保存获取住户编号
                axios.get('http://localhost:8085/updateProperty',{
                  params:{
                    propertyId:form.value.propertyId,   //房产id
                    propertyForeignkey:form.value.propertyForeignkey,   //住户id
                    propertyAddress: form.value.propertyAddress,  //物业地址
                    propertyIssell: form.value.propertyIssell,  //是否出售
                    householdName: form.value.householdName,  //业主姓名
                    propertyType: form.value.propertyType,  //户型
                    propertyDecorate: form.value.propertyDecorate,  //装修情况
                    propertyAllarea: form.value.propertyAllarea,  //建筑面积
                    propertyUsearea: form.value.propertyUsearea,  //使用面积
                  }
                }).then(
                    ()=>{
                      ElMessage({type:'success',message:'保存成功！'})
                    },
                    ()=>{
                      ElMessage({type:'error',message:'保存失败！'})
                    }
                )
              }else{
                //2.不存在则进行提示
                ElMessage({type:'error',message:'保存失败，业主不存在！'})
              }
            },
            ()=>{
              ElMessage({type:'error',message:'保存失败！'})
            }
        )
      }else{
        axios.get('http://localhost:8085/updateProperty',{
          params:{
            propertyId:form.value.propertyId,   //房产id
            propertyForeignkey:form.value.propertyForeignkey,   //住户id
            propertyAddress: form.value.propertyAddress,  //物业地址
            propertyIssell: form.value.propertyIssell,  //是否出售
            householdName: form.value.householdName,  //业主姓名
            propertyType: form.value.propertyType,  //户型
            propertyDecorate: form.value.propertyDecorate,  //装修情况
            propertyAllarea: form.value.propertyAllarea,  //建筑面积
            propertyUsearea: form.value.propertyUsearea,  //使用面积
          }
        }).then(
            ()=>{
              ElMessage({type:'success',message:'保存成功！'})
            },
            ()=>{
              ElMessage({type:'error',message:'保存失败！'})
            }
        )
      }
    }
    //挂载加载数据
    onMounted(()=>{
      axios.get('http://localhost:8085/getPropertyByAddress',{
        params:{
          address:JSON.parse(sessionStorage.getItem("user")).username
        }
      }).then(
          (response)=>{
            form.value=response.data
          },
          ()=>{
          }
      )
    })

    return{
      tableData,
      saveRow,
      isSellOptions,
      typeOptions,
      decorateOptions,
      form,
    }
  }
}
</script>

<style scoped>
  .el-table{
    /*padding: 20px 20px 20px 20px;*/
  }
  .page_warp{
    width: 600px;
    margin: 5px auto;
    height: 40px;
  }
  .el-pagination{
    margin-right: 50px;
  }
  .demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
  }
  .el-input-number--small{
    width: 100px;
  }
</style>